import {PlusOutlined} from '@ant-design/icons';
import {
  Badge,
  Calendar,
  Divider,
  Col,
  Statistic,
  Card,
  Drawer,
  InputNumber,
  Select,
  Form,
  Modal,
  Tag,
  Row,
  message
} from 'antd';
import {ArrowUpOutlined, ArrowDownOutlined} from '@ant-design/icons';
import React, {useState, useRef, useEffect, Component} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import StatisticCard from "@/pages/home/home-page/components/StatisticCard";
import hp_icon3 from '@/assets/img/hp_icon3.png'
import hp_icon1 from '@/assets/img/hp_icon1.png'
import hp_verity from '@/assets/img/hp_verity.png'
import hp_qtck from '@/assets/img/hp_qtck.png'
import yujing from '@/assets/img/yujing.png'
import hp_dbck from '@/assets/img/hp_dbck.png'
import hp_dbrk from '@/assets/img/hp_dbrk.png'
import fund_yufukuan from '@/assets/img/fund_yufukuan.png'
import fund_yushoukuan from '@/assets/img/fund_yushoukuan.png'
import edit from '@/assets/img/edit.png'
import {portalStats} from "@/services/home";
import moment from "moment";
import {connect} from "umi";
import styles from './styles.less';
import {queryMaintenceListByMonth, queryMaintenceListByYear, removeMaintenance} from "@/services/system";




class HomePage extends Component {


  constructor() {
    super();
    this.state = {
      totalMaintenceData: [],
      totalYearMaintenceData: [],
    }
  }

  componentDidMount() {

    this.getTotalMaintenceData(moment(new Date()).format('YYYY-MM'));
  };

  getTotalMaintenceData = (date) => {
    queryMaintenceListByMonth({
      date: date
    }).then(res => {
      if (res && res.status === '0') {
        this.setState({
          totalMaintenceData: res.result
        })

      } else {
        message.error(res.message)
      }
    })
    queryMaintenceListByYear({
      year: date.substring(0, 5)
    }).then(res => {
      if (res && res.status === '0') {
        this.setState({
          totalYearMaintenceData: res.result
        })

      } else {
        message.error(res.message)
      }
    })
  }

  onPanelChange = (date, mode) => {
    this.getTotalMaintenceData(moment(date).format('YYYY-MM'));
  }



  render() {
    const {totalMaintenceData, totalYearMaintenceData} = this.state

    const getListData = (value) => {
      let listData = [];
      for (let data of totalMaintenceData) {
        if (data.time === moment(value).format('YYYY-MM-DD')) {
          listData.push(data)
        }
      }
      return listData || [];
    };

    const getMonthData = (value) => {
      let listData = [];
      for (let data of totalYearMaintenceData) {
        if (data.time === moment(value).format('YYYY-MM')) {
          if (data.type === 'success') {
            listData.push({
              content: `已完成保养${data.content}次`,
              type: 'success'
            })
          }else {
            listData.push({
              content: `待完成保养${data.content}次`,
              type: 'warning'
            })
          }
        }
      }
      return listData || []
    };


    const monthCellRender = (value) => {
      const listData = getMonthData(value);
      return (
        <ul className="events">
          {listData.map((item, idx) => (
            <li key={idx}>
              <Badge status={item.type} text={item.content}/>
            </li>
          ))}
        </ul>
      );
      // const listData = getMonthData(value);
      // return (
      //     {listData.map((item, idx) => (
      //         <div className="notes-month" key={idx}>
      //           <section>{item.content}</section>
      //         </div>
      //       ))}
      //
      // );
    };
    const dateCellRender = (value) => {
      const listData = getListData(value);
      return (
        <ul className="events">
          {listData.map((item) => (
            <li key={item.time}>
              <Badge status={item.type} text={item.content}/>
            </li>
          ))}
        </ul>
      );
    };
    return (<PageContainer>
      <div className={'cal-wrapper'}>
        <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} onPanelChange={this.onPanelChange}/>
      </div>

    </PageContainer>)
  }
}

export default connect(({user, global, loading}) => ({
  currentUser: user.currentUser,
  collapsed: global.collapsed,
  portalStatus: global.portalStatus,
}))(HomePage);
